<template>
    <el-dialog :visible.sync="visible.isShow" size="tiny" style ="min-width: 300px" @close="close" @open='open'>
        <div class="checked"></div>
        <!-- <p class="del-content">{{Content.content}}</p> -->
        <p class="del-content" v-if = "Content.newBind != 0"><span>新绑定{{Content.newBind}}人，此前已绑定{{Content.success}}人</span><span class="count">(<i>{{num}}</i>s)</span></p>
        <p class="del-content" v-else><span>已成功绑定{{Content.success}}人！</span><span class="count">(<i>{{num}}</i>s)</span></p>
        <!-- <footer>
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </footer> -->
    </el-dialog>
</template>

<script>
// import EDialogClose from 'components/dialogClose';

export default{
    // components: { EDialogClose},
    props: {
        visible: {
            type: Object,
            default() {
                return {}
            }
        },
        Content: {
            type: Object,
            default() {
                return {
                    newBind: '0',
                    success: '0'
                }
            }
        }
    },
    data() {
        return {
            add: 1,
            count: 30,
            num: 3,
            name: '',
            timer: null
        }
    },
    mounted() {
        console.log('222111');
    },
    methods: {
        // 关闭
        close() {
            // this.$emit('toClose');
            clearInterval(this.timer);
            this.visible.isShow = false;
        },

        open() {
            this.num = 3;
            this.timer = setInterval(() => {
                if (this.num > 0) {
                    this.num--; 
                } else {
                    clearInterval(this.timer);
                        // this.$emit('toClose');
                    this.visible.isShow = false;
                    this.$emit('bindCardState', true);
                }
            }, 1000);
        },

        // 确定
        submit() {
            // this.$emit('del');
            // if(this.visible.isShow && this.Content !==  this.name){
            //     console.log('进来')
            this.name = this.Content;
            this.$emit('bindCardState', true);
            this.$emit('del');
            // }else{
            //     console.log('没进来')
            // }
            
        }
    }

    // watch: {
    //     ['visible.isShow'](val) {
    //         if (val) {
    //             this.num = 3;
    //             this.timer = setInterval(() => {
    //                 if (this.num > 0) {
    //                     this.num--; 
    //                 } else {
    //                     clearInterval(this.timer);
    //                     this.visible.isShow = false;
    //                 }
    //             }, 1000);
    //         }
    //     }
    // }
}
</script>

<style lang="scss" scoped>   
h3{
    font-size:14px;
}
.checked{
    width: 64px;
    height: 64px;
    margin: 0 auto;
    background: url('../../../assets/check.png') no-repeat center center;
}
.del-content{
    text-align:center;
    padding:48px 0;
    font-size:14px;
    color:#333;
    i{
        font-style: normal; 
    }
}
.count{
    color: #ccc;
}
.del-btn-group{
    text-align:center;
    button:first-of-type{
        margin-right:40px;
    }
}
footer {
  text-align: center;
}
</style>